<section class="section-info">
  <div>All select：{{ (lvTable.getSelection() | userProp) || 'none' }}</div>
  <div>Current select：{{ (lvTable.getRenderSelection() | userProp) || 'none' }}</div>
</section>

<lv-datatable
  [lvData]="data"
  #lvTable
  [lvPaginator]="page"
  lvSelectionMode="multiple"
  [lvSelection]="selection"
  (lvSelectionChange)="selectionChange($event)"
>
  <thead>
    <tr>
      <th
        width="40px"
        lvShowCheckbox
        lvCustomAllCheck
        [lvRowsData]="lvTable.renderData | selectable"
        (lvCheckChange)="checkAllChange($event)"
      ></th>
      <th lvCellKey="name">Name</th>
      <th lvCellKey="age">Age</th>
      <th lvCellKey="random">Random</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable.renderData">
      <tr>
        <td
          lvShowCheckbox
          [lvRowData]="item"
          [lvDisabled]="item.disabled"
          [lvCheckboxTip]="item.checkboxTip"
          (lvCheckChange)="checkOneChange($event)"
        ></td>
        <td (click)="toggleSelect(item)">
          <a>{{ item.name }}</a>
        </td>
        <td>{{ item.age }}</td>
        <td>{{ item.random }}</td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>
<lv-paginator #page lvPageSize="5" [lvPageSizeOptions]="[5, 10, 50, 100]"></lv-paginator>
